<!--
 * @Description: 
 * @Author: duan_shuangjun 丶
 * @Date: 2025-08-20 23:09:02
 * @LastEditTime: 2025-10-12 22:26:05
-->
<!-- 全局自定义弹窗组件 -->
<template>
  <transition name="dialog-fade">
    <div v-show="dialogVisible" class="dialog-box">
      <div class="bgc" :style="{ 'z-index': 200 }"></div>
      <transition name="content-slide">
        <div
          v-show="dialogVisible"
          class="content"
          :style="{ 'z-index': 201, top: props.top }"
          :class="curentClass"
        >
          <el-icon class="close-icon" v-if="isClose" @click="handleCloseDialog">
            <Close />
          </el-icon>
          <!-- 插槽 -->
          <slot></slot>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'
import { Close } from '@element-plus/icons-vue'

interface Props {
  visible: boolean
  isClose?: boolean
  isNotScroll?: boolean
  curentClass?: string
  top?: string
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  isClose: true,
  isNotScroll: true,
  curentClass: '',
  top: '15vh'
})

const emit = defineEmits<{
  'update:visible': [value: boolean]
  close: []
}>()

const dialogVisible = computed({
  get() {
    console.log('CustomDialog - visible:', props.visible)
    return props.visible
  },
  set(val: boolean) {
    console.log('CustomDialog - setting visible:', val)
    emit('update:visible', val)
  }
})

watch(dialogVisible, val => {
  if (val) {
    console.log(val)
  }
})

function handleCloseDialog() {
  emit('close')
  emit('update:visible', false)
}
</script>

<style scoped lang="scss">
.dialog-box {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.bgc {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  animation: bgFadeIn 0.3s ease;
}

.content {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  min-width: 520px;
  max-height: calc(100vh - 150px);
  padding: 50px;
  background: #ffffff;
  border-radius: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: contentSlideIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-sizing: border-box;

  .close-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    color: #909399;
    transition: color 0.3s ease;

    &:hover {
      color: #409eff;
    }
  }

  /* 自定义滚动条样式 */
  &::-webkit-scrollbar {
    width: 6px;
    margin-right: 10px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    margin: 10px 0;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
    border: 1px solid #ffffff;

    &:hover {
      background: #a8a8a8;
    }
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }
}

/* 弹窗整体淡入淡出动画 */
.dialog-fade-enter-active,
.dialog-fade-leave-active {
  transition: all 0.3s ease;
}

.dialog-fade-enter-from,
.dialog-fade-leave-to {
  opacity: 0;
}

.dialog-fade-enter-to,
.dialog-fade-leave-from {
  opacity: 1;
}

/* 内容弹窗动画 */
.content-slide-enter-active,
.content-slide-leave-active {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.content-slide-enter-from {
  opacity: 0;
  transform: translateX(-50%) scale(0.8);
}

.content-slide-leave-to {
  opacity: 0;
  transform: translateX(-50%) scale(0.8);
}

.content-slide-enter-to,
.content-slide-leave-from {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* 背景淡入动画 */
@keyframes bgFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 内容滑入动画 */
@keyframes contentSlideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}
</style>
